<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
</head>
<body>

<!--主容器-->
<div class="ui container">
    <div class="ui segment">

        <div style="text-align: center">
            <a class="item" th:href="@{/index}">返回首页</a>
        </div>
        <div class="ui placeholder segment">
            <div class="ui column very relaxed stackable grid">
                <div class="column">
                    <div class="ui form">
                        <form th:action="@{/login}" method="post">
                            <div class="field">
                                <label th:text="#{login.username}">Username</label>
                                <div class="ui left icon input">
                                    <input type="text" th:placeholder="#{login.username}" name="username" id="username">
                                    <i class="user icon"></i>
                                </div>
                            </div>
                            <div class="field">
                                <label th:text="#{login.password}">Password</label>
                                <div class="ui left icon input">
                                    <input type="password" name="password" id="password">
                                    <i class="lock icon"></i>
                                </div>
                            </div>
                            <div class="field">
                                <input type="checkbox" name="remember" th:text="#{login.remember}" >
                            </div>
                           <div class="field">
                               <input type="submit" class="ui blue submit button" value="登录" style="margin-left:20px;display: inline"/>
                               <div class="ui  button" style="display: inline;margin-left: 5px" onclick="sign()">
                                   <i th:text="#{login.register}">注册</i>
                                   <!-- 这里传入参数不需要使用 ？使用 （key=value）-->
                               </div>
                           </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align: center">
            <a class="btn btn-sm" th:href="@{/toLogin(l='zh_CN')}">中文</a> &nbsp|&nbsp
            <a class="btn btn-sm" th:href="@{/toLogin(l='en_US')}">English</a>
<!--            <br><br>-->
<!--            <small>blog.kuangstudy.com</small>-->
        </div>
<!--        <div class="ui segment" style="text-align: center">-->
<!--            <h3>Spring Security Study by 秦疆</h3>-->
<!--        </div>-->
    </div>


</div>

<script th:src="@{/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/qinjiang/js/semantic.min.js}"></script>
<script type="text/javascript">
    function sign(){
        var name = $("#username").val();
        var password = $("#password").val();
        $.getJSON("/sign",{name: name,password: password},function (status) {
            if (status){
                alert("注册成功")
            }else {
                alert("注册失败")
            }
        });
    }
</script>
</body>
</html>